// 内置节点-扩展

import defaultStyles from '../defaultStyles';
const { iconStyles, nodeStyles, nodeStateStyles, anchorPointStyles, nodeLabelStyles } = defaultStyles;

function mergeStyle(instanceStyle, configStyle) {
    let obj = {};
    for (let key in instanceStyle) {
        obj[key] = instanceStyle[key];
    }
    for (let key in configStyle) {
        if (obj[key]) {
            obj[key] = Object.assign({}, obj[key], configStyle[key]);
        } else {
            obj[key] = configStyle[key];
        }
    }
    return { style: obj };
}

function getStyle(options, cfg) {
    return {
        ...cfg,
        ...nodeStyles, // 节点样式
        ...options,    // 更新节点样式
        ...mergeStyle(cfg.style, nodeStateStyles),  // 节点状态样式 nodeState:default  nodeState:hover  nodeState:selected
        labelCfg: {    // label样式
            ...nodeLabelStyles,
            ...cfg.labelCfg
        },
        iconStyles: {  // icon样式
            ...iconStyles,
            ...cfg.iconStyles
        },
        anchorPointStyles: { // 锚点样式
            ...anchorPointStyles,
            ...cfg.anchorPointStyles
        },
        anchorHotsoptStyles: cfg.anchorHotsoptStyles
    }
}

export default G6 => {
    G6.registerNode('rect-node', {
        // 图形类型
        shapeType: 'rect',
        // shape样式
        getShapeStyle(cfg) {
            const width = cfg.style.width || 80;
            const height = cfg.style.height || 40;
            return getStyle.call(this, {
                width,
                height,
                radius: 5,
                x: -width / 2,
                y: -height / 2
            }, cfg);
        }
    }, 'base-node');
    
    // 扩展圆形节点
    G6.registerNode('circle-node', {
        shapeType: 'circle',
        getShapeStyle(cfg) {
            const r = cfg.style.r || 30;
            return getStyle.call(this, {
                r, // 半径
                // 将图形中心坐标移动到图形中心, 用于方便鼠标位置计算
                x: 0,
                y: 0
            }, cfg);
        }
    }, 'base-node');
}
